<template>
    <div class="page">
        <el-form :inline="true">
            <el-form-item>
                <el-button icon="el-icon-plus" type="primary" @click="addNewAgent">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" border>
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="ID" prop="id"> </el-table-column>
            <el-table-column label="用户ID" prop="uid"> </el-table-column>
            <el-table-column label="代理名称" prop="name"> </el-table-column>
            <el-table-column label="省市县">
                <template slot-scope="scope">
                    {{ scope.row.province }}
                    {{ scope.row.city }}
                    {{ scope.row.county }}
                </template>
            </el-table-column>
            <el-table-column label="提成比例" prop="proportion">
                <template slot-scope="scope">
                    {{ scope.row.proportion }}%
                </template>
            </el-table-column>
            <el-table-column label="可提现余额" prop="achievement"> </el-table-column>

            <el-table-column label="代理类型">
                <template slot-scope="scope">
                    {{ scope.row.agentType === 1 ? '市级代理' : '县级代理' }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime"> </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-pagination background @current-change="handlePageChange" :current-page="query.pageNum"
            :page-size="query.pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- 新增表单 -->
        <el-dialog title="代理新增" :visible.sync="dialogShow">
            <el-form :model="form">
                <el-form-item label="代理名称" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="用户ID" label-width="120px">
                    <el-input v-model="form.uid" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="代理类型" label-width="120px">
                    <el-select v-model="form.agentType" autocomplete="off">
                        <el-option label="市级代理" :value="1"></el-option>
                        <el-option label="县级代理" :value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="省市县" label-width="120px">
                    <el-cascader-panel :props="{ checkStrictly: true }" :options="options"
                        v-model="cityArray"></el-cascader-panel>
                    <div>
                        <span>{{ form.province }} </span>
                        <span>{{ form.city }} </span>
                        <span>{{ form.county }}</span>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogShow = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { agentAdd, agentList } from "../../../api/ds/newSystem"
import citys from "../operation/city.json";

export default {
    components: {},
    props: {},
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 20
            },
            list: [],
            total: 0,
            dialogShow: false,
            form: {
                uid: "",
                province: "",
                city: "",
                county: "",
                name: "",
                agentType: 1,
            },
            cityArray: [],
            options: citys
        }
    },
    computed: {},
    watch: {
        cityArray(newValue, oldValue) {
            console.log(newValue)
            if (this.form.agentType === 0) {
                this.form.province = newValue[0]
                this.form.city = newValue[1]
                this.form.county = newValue[2]
            } else {
                this.form.province = newValue[0]
                this.form.city = newValue[1]
                this.form.county = ''
            }

        }
    },
    created() {
        this.getData()
    },
    methods: {
        async getData() {
            let res = await agentList(this.query)
            console.log(res)
            if (res.code === 200) {
                this.list = res.rows
                this.total = res.total
            }
        },
        handlePageChange(val) {
            console.log(val)
            this.query.pageNum = val
            this.getData()
        },
        addNewAgent() {
            this.dialogShow = true
        },
        async submit() {
            console.log(this.form)
            let res = await agentAdd(this.form)
            if (res.code === 200) {
                console.log(res)
                this.$notify({
                    title: '新增',
                    message: res.msg,
                    duration: 2000,
                    type: 'success'

                });

                // 关闭dialog
                this.dialogShow = false
                // 清空表单
                this.form = {
                    uid: "",
                    province: "",
                    city: "",
                    county: "",
                    name: "",
                    agentType: 1,
                }
                // 重获数据
                this.getData()
            }
        }
    },
}
</script>
<style lang='scss' scoped>
.page {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
}
</style>